<template>
    <div class="nav">
        <ul ref="navul">
            <li>
                <router-link to='/index' class="li">
                    <div class="svgbox">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-faxian"></use>
                        </svg>
                    </div>
                    <p>发现</p>
                </router-link>
            </li>
            <li>
                <router-link to='/play' class="li">
                    <div class="svgbox">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-touting"></use>
                    </svg></div>
                    <p style="text-align:center">歌手</p>
                </router-link>
            </li>
            <li>
                <router-link :to='{path:"/songdetails"}' class="li bigting">
                    <div class="nochange" v-show="svgchange">
                        <div class="svgbox bigsvg">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-bofang"></use>
                            </svg>
                        </div>
                    </div>
                    <div class="haschange" v-show="!svgchange">
                        <div class="hasimg">
                            <div class="hasimgbox">
                                <img v-lazy="songimg" alt="">
                                <svg class="icon" aria-hidden="true">
                                    <use 
                                    :xlink:href="this.$store.state.nowstate==true?'#icon-24gf-pause2':'#icon-24gf-play'"></use>
                                </svg>
                            </div>
                        </div>
                        <canvas ref="hb"></canvas>
                    </div>
                </router-link>
            </li>
            <li>
                <router-link to='/circle' class="li">
                    <div class="svgbox">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-paihangbang"></use>
                    </svg></div>
                    <p>榜单</p>
                </router-link>
            </li>
            <li>
                <router-link to='/center' class="li">
                    <div class="svgbox">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shouye"></use>
                    </svg></div>
                    <p>我的</p>
                </router-link>
            </li>
        </ul>
        <div class="navthebox">
            <div class="navbox"></div>
        </div>
        <div class="bfq">
            <audio 
            loop
            :autoplay="this.$store.state.nowstate"
            controls
            @canplay="canplayFn"
            @timeupdate="timeupdateFn"
            @ended="endFn"
            ref="bfq"
            :src="`https://music.163.com/song/media/outer/url?id=${$store.state.nowid}.mp3`" 
          >
            </audio>
        </div>
    </div>
</template>
<style lang="less" scoped>
audio{
    // position: absolute;
    // top: -220%;
    left: 0px;
    width: 0px;
    left:0px;
    opacity: 0;
}
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
//   overflow: hidden;
}
ul,li{
    margin: 0;
    padding: 0;
    list-style: none;
}
ul{
    display:flex;
    justify-content: space-around;
    background-color: white;
    z-index: 100;
    height: 100%;
    position: relative;
    box-shadow: 0px 0px 8px #eee;
}
.navthebox{
    position: absolute;
    left: 50%;
    top: 0px;
    transform: translate(-50%,-100%+1px);
    height: 1.2rem;
    overflow: hidden;
    padding-top:8px;
    box-sizing: border-box;
    .navbox{
        width: 4rem;
        height: 4rem;
        border-radius: 50%;
        background-color: #fff;
        box-shadow: 0px 0px 8px #ccc;
    }
}
li{
    height: 100%;
}
.li{
    height: 100%;
    padding: 0px 0.2rem;
    display: inline-block;
    text-decoration: none;
    color: rgb(163,163,163);
    -webkit-tap-highlight-color:transparent; 
    .svgbox{
        margin: 0 auto;
        margin-top: 0.3rem;
        text-align: center;
        svg{
            font-size: 1.5rem;
            margin: 0 auto;
        }
    }
    .bigsvg{
        margin-top: 1px;
        svg{
            font-size: 2.5rem;
        }
    }
    
    p{
        margin: 0;
        margin-top: 0.05rem;
        font-size: 0.8rem;
    }
}
.nav{
    width: 100%;
    height: 8%;
    position: fixed;
    bottom: 0px;
    left: 0px;
    z-index: 1000;
}
.nochange{
    .bigsvg{
        width: 40px;
        height: 40px;
        position: relative;
        svg{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 3rem;
        }
    }
}
.haschange{
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    // overflow: hidden;
    position: relative;
    .hasimg{
        position: absolute;
        top: 50%;
        left: 50%;
        width: 2.5rem;
        height: 2.5rem;
        font-size: 0px;
        border-radius: 50%;
        transform: translate(-50%,-50%);
        // overflow: hidden;
        
    }
    canvas{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
}
.hasimgbox{
    position: relative;
    width: 2.5rem;
    height: 2.5rem;
    overflow: hidden;
    border-radius: 50%;
    img{
        // position: absolute;
        // top: -15%;
        // left: -10%;
        width: 2.5rem;
        animation: songzhuan 8s linear infinite;
    } 
    svg{
        position: absolute;
        top: 50%;
        left: 52%;
        transform: translate(-50%, -50%);
        font-size: 1.5rem;
        color: #ffffffbf;
    }
}
</style>
<script>
import "../other/font/iconfont"
export default {
    name:"mynav",
    mounted(){
        this.navheight = this.$refs.navul.offsetHeight
    },
    data(){
        return {

            id:0,

            svgchange:true,
            songid:0,
            songimg:'',
            zongsc:0,
            nowsc:0,
            status:false,
            iconsta:false,
            autoplay1:false,
            keyValue:0,
            tim:null,

            navheight:0,

            nage:0,
            moshi:0,
            what:0,
            list1:[],
            list2:[]
        }
    },
    watch:{
        "$store.state.nowid":{
            handler(value){
                this.$store.commit("changechangenum",0)
                // this.getthename(value)
            }
        },
        '$store.state.nowstate':{
            handler(){
                this.gbzt()
            }
        },
        "$store.state.nowtime":{
            handler(value){
                if(this.$store.state.change){
                    this.shezhi(value)
                }
            }
        },
    },
    methods:{
        jdt(value) {
            this.$nextTick(() => {
                let canvas = this.$refs.hb;
                canvas.width = 55;
                canvas.height = 55;
                let hua = canvas.getContext("2d");
                let huayuan = (x, y, r, s, e, color) => {
                    hua.beginPath();
                    hua.arc(x, y, r, (s * Math.PI) / 180, (e * Math.PI) / 180, false),
                        (hua.lineWidth = 4);
                    hua.strokeStyle = color;
                    hua.stroke();
                };
                let point = {
                    x: canvas.width / 2,
                    y: canvas.height / 2,
                    r: 25,
                };
                hua.clearRect(0, 0, canvas.width, canvas.height);
                huayuan(point.x, point.y, point.r, -90, 270, "#a3a3a34f");
                huayuan(point.x, point.y, point.r, -90, 360 * value-90, "#4475b7");
            });
        },
        // 更新时间
        timeupdateFn(){
            this.$nextTick(()=>{
                this.$store.commit("changenowtime",this.$refs.bfq.currentTime)
                let v = this.$refs.bfq.currentTime / this.$refs.bfq.duration;
                this.jdt(v);
            })
        },
        // 当能够播放时
        canplayFn(){
            this.$nextTick(()=>{
                this.$store.commit("changealltime",this.$refs.bfq.duration)
                this.svgchange = false
                this.getimg()
            })
        },
        // 获取底部的歌曲图片
        getimg(){
            axios.get(`https://apis.netstart.cn/music/song/detail?ids=${this.$store.state.nowid}`).then(
                res=>{
                    // console.log(res)
                    this.songimg = res.data.songs[0].al.picUrl
                },
                err=>{
                    console.log(err)
                }
            )
        },
        // 改变当前状态
        gbzt(){
            if(this.$store.state.nowstate){
                this.$refs.bfq.play()
            }else{
                this.$refs.bfq.pause()
            }
        },
        // 设置当前时间
        shezhi(value){
            this.$nextTick(()=>{
                if(this.$refs.bfq.currentTime !== this.$store.state.nowtime){
                    this.$refs.bfq.currentTime = value;
                }
            })
        },
        // 播放完毕
        endFn(){
            if(this.$store.state.listmoshi === 1){
                this.$nextTick(() => {
                    if (this.$refs.bfq) {
                        this.$refs.bfq.play();
                    }
                });
            }
        },
        // songlist(value){
        //     this.nage = value.which
        //     this.moshi = value.moshi
        //     this.what = value.what
        //     this.list1 = value.list1
        //     this.list2 = value.list2
            
        //     // this.sta(true)
        //     if(value.list1[0] !== undefined || value.list2[0] !== undefined){
        //         if(value.what == 0){
        //             this.id = this.list1[value.which]
        //         }else{
        //             this.id = this.list2[value.which]
        //         }
        //     }
        // },
        // 改变歌曲播放

        // 判断歌曲是否能用
        sta(value){
            if(this.$refs.bfq !== undefined){
                this.status = value
                axios.get(`https://apis.netstart.cn/music/check/music?id=${this.$store.state.nowid}`).then(
                    res=>{
                        // console.log(res)
                        if(res.data.success==true, res.data.message== 'ok'){
                            this.tim=setTimeout(()=>{
                                if(value){
                                    this.$refs.bfq.play()
                                }else{
                                    this.$refs.bfq.pause()
                                }
                                this.svgchange = false
                                clearTimeout(this.tim)
                            },100)
                        }
                    },
                    err=>{
                        console.log(err)
                    }
                )
            }
        },
        // 获取歌曲名字
        getthename(value){
            axios.get(`https://apis.netstart.cn/music/song/detail?ids=${value}`).then(
                res=>{
                    // console.log(res.data.songs[0].name)
                    let obj = {}
                    obj.name = res.data.songs[0].name
                    obj.id = res.data.songs[0].id
                    this.$store.dispatch("setlist2", obj);
                },
                err=>{
                    console.log(err)
                }
            )
        }
    }
}
</script>
<style>
@keyframes songzhuan {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
</style>